import React, { Component } from 'react';
import api from '../../api';
import SongHeader from './Header'
import Sheet from '../component/Sheet';
import store from '../../store';

class SongSheet extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
            playList:null
        }
    }
    componentDidMount(){
        api.getPublic(`/playlist/detail?id=${this.props.location.state.id}`).then(res=>{
            // console.log(res.data);
            this.setState({
                playList:res.data.playlist
            })
            const action = {
                type: 'songList',
                value: res.data.playlist.tracks
            }
            store.dispatch(action)
        })
    }
    
    
    render() {
        console.log(this.state);
        return (
            <div>
                <SongHeader msg={this.state.playList}/>
                <Sheet msg={this.state.playList}/>
            </div>
        );
    }
}

export default SongSheet;